<template>

  <div>
    <el-tabs v-model="activeName">
      <el-table
          highlight-current-row :data="userList"  style="width: 100%">
        <el-table-column aligen="center" prop="uid" label="编号" width="80">
        </el-table-column>
        <el-table-column prop="username" label="用户名" width="100">
        </el-table-column>
        <el-table-column prop="name" label="真实姓名" width="100" >
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="180" >
        </el-table-column>
        <el-table-column prop="registerdate" label="注册日期" width="120">
        </el-table-column>
        <el-table-column prop="recent" label="最近一次登录" width="120">
        </el-table-column>
        <el-table-column prop="token" label="jwt">
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot="header" slot-scope="scope">
            <el-input
                v-model="search_key"
                @keyup.enter.native="search"
                size="mini"
                placeholder="输入关键字搜索"/>
          </template>
          <template slot-scope="scope">
            <el-button size="small" type="primary" @click="editUser(scope.row)" disabled>编辑</el-button>
            <el-button size="small" type="danger" @click="deleteUser(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-tabs>

    <el-dialog title="编辑用户" :visible.sync="dialogVisible"  :append-to-body="true" >
      <div>
        <el-form ref="formEdit">
          <el-form-item label="Username">
            <el-input v-model="editUserName"></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="editRealname"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="editGender">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="editPhone"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateUser">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script> import axios from "axios";

export default {
  data() {
    return {
      search_key:'',
      activeName: 'first',
      userList: [],
      editId: 0,
      editUserName: '',
      editRealname: '',
      editGender: '',
      editPhone: '',
      dialogVisible: false
    }
  },
  mounted() {
    this.getUsers()
  },
 methods: {
   search(){
     if (this.search_key===''){
       this.getUsers()

     }else {
       axios.get('http://localhost:8088/user_b/searchUserByKey',{params:{
           key:this.search_key
         }})
           .then(response => {
             this.userList=response.data.data
           })
           .catch(error => {
             console.log(error)
           })
     }
   },

   getUsers(){
     axios.get('http://localhost:8088/user_b/findAllUser')
         .then(response => {
           console.log(response.data.data)
           this.userList = response.data.data
           // this.categories=response.data.categories
         })
         .catch(error => {
           console.log(error)
         })
   },
    editUser(row) {
      this.dialogVisible = true
      console.log("Edit")
      this.editId = row.id
      this.editUserName = row.username
      this.editRealname = row.realname
      this.editGender = row.gender
      this.editPhone = row.phone
    },
    updateUser() {
      for (let i = 0; i < this.userList.length; i++) {
        if (this.userList[i].id === this.editId) {
          this.userList[i].username = this.editUserName
          this.userList[i].realname = this.editRealname
          this.userList[i].gender = this.editGender;
          this.userList[i].phone = this.editPhone
        }
      }
      this.dialogVisible = false
    },
    deleteUser(row) { /*删除用户*/

    }
  }
} </script>
